<!DOCTYPE html>
<html>
<head>
  <title>Projectile Motion Diagram</title>
</head>
<body>
  <canvas id="physicsCanvas" width="400" height="370"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 20px Times New Roman';

    // Origin coordinates on canvas
    const Ox = 80;
    const Oy = 50;

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
      const dx = toX - fromX;
      const dy = toY - fromY;
      const angle = Math.atan2(dy, dx);
      ctx.beginPath();
      ctx.moveTo(fromX, fromY);
      ctx.lineTo(toX, toY);
      ctx.moveTo(toX, toY);
      ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
      ctx.moveTo(toX, toY);
      ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
      ctx.stroke();
    }

    // 1. Draw Coordinate Axes
    // x-axis (horizontal)
    drawArrow(ctx, 30, Oy, 380, Oy);
    ctx.fillText('x', 385, Oy + 8);

    // y-axis (vertical, pointing down)
    drawArrow(ctx, Ox, 20, Ox, 350);
    ctx.fillText('y', Ox - 25, 350);

    // 2. Draw Labels
    // Origin 'O'
    ctx.fillText('O', Ox - 28, Oy + 20);
    // Particle 'P'
    ctx.fillText('P', Ox - 10, Oy - 15);

    // 3. Draw Projectile Trajectory (Parabola y = kx^2)
    ctx.beginPath();
    ctx.moveTo(Ox, Oy);
    const k = 0.0035; // Constant for the parabola's shape
    for (let x = 1; x <= 280; x++) {
      const y = k * x * x;
      if (Oy + y > 360) break;
      ctx.lineTo(Ox + x, Oy + y);
    }
    ctx.stroke();

    // 4. Draw Particle at the origin
    ctx.beginPath();
    ctx.arc(Ox, Oy, 5, 0, 2 * Math.PI);
    ctx.fill();

    // 5. Draw Initial Velocity Vector (v₀)
    const v0_len = 80;
    drawArrow(ctx, Ox, Oy, Ox + v0_len, Oy);
    ctx.fillText('v', Ox + 35, Oy - 10);
    ctx.save();
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('0', Ox + 46, Oy - 4);
    ctx.restore();

    // 6. Draw Gravity Acceleration Vector (g)
    const g_x = 40;
    const g_y_start = 120;
    const g_len = 50;
    drawArrow(ctx, g_x, g_y_start, g_x, g_y_start + g_len);
    ctx.fillText('g', g_x - 20, g_y_start + g_len / 2 + 8);

  </script>
</body>
</html>